
<html><head><title>Sample: Simple Container</title><!-- default container look and feel -->
	
	<link href="StyleSheets/gadgets.css" rel="stylesheet"/>
	<link href="StyleSheets/container.css" rel="stylesheet"/>
	<link href="StyleSheets/temp_styles.css" rel="stylesheet"/>

	<script src="Scripts/yui/yahoo/yahoo-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/dom/dom-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/event/event-min.js" type="text/javascript"></script>
	<script src="Scripts/yui/utilities/utilities.js" type="text/javascript"></script>
	<script src="Scripts/yui/dragdrop/dragdrop-min.js" type="text/javascript"></script>
	<script src="Scripts/container/json.js" type="text/javascript"></script>
	<script src="Scripts/container/ifpc.js" type="text/javascript"></script>
	<script src="Scripts/container/cookies.js" type="text/javascript"></script>
	<script src="Scripts/container/gadgets.js" type="text/javascript"></script>
	
</head>
<body>
  <h2>Sample: Simple Container</h2>
  <div class="column" id="sort1" style="float: left;">
  </div>
  <div class="column" id="sort2" style="float: left;">
 	<div class="gadget" id="10">
 	<div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_0_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(0).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(0).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(0).handleToggle()" href="#">toggle</a></span></div>
 	<div class="gadgets-gadget-user-prefs-dialog" id="remote_module_0_userPrefsDialog"></div>
 	<div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FDynamicHeight.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_0" id="remote_module_0"></iframe></div>
 </div>
 	<div class="gadget" id="11"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_2_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(2).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(2).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(2).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_2_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FDynamicHeight.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_2" id="remote_module_2"></iframe></div></div></div>
  <div class="column" id="sort3" style="float: left;">
 	<div class="gadget" id="12"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_1_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(1).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_1_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FDynamicHeight.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_1" id="remote_module_1"></iframe></div></div>
 	<div class="gadget" id="13"><div class="gadgets-gadget-title-bar"><span class="gadgets-gadget-title" id="remote_module_3_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a onclick="gadgets.container.getGadget(3).refresh()" href="#">Refresh</a> | <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(3).handleToggle()" href="#">toggle</a></span></div><div class="gadgets-gadget-user-prefs-dialog" id="remote_module_3_userPrefsDialog"></div><div class="gadgets-gadget-content"><iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FDynamicHeight.xml&synd=gadgets&mid=0&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_3" id="remote_module_3"></iframe></div></div>
 </div>
  
	<script type="text/javascript">
	/*$(document).ready(
		function () {
			$('a.closeEl').bind('click', toggleContent);
			$('#sort2').makeSortable({connectWith: ['#sort3', '#sort1'], opacity: '50%'});
			$('#sort3').makeSortable({connectWith: ['#sort2']});
		}
	);*/
	
		window.onload = (function() {
		
		var Dom = YAHOO.util.Dom;
		var Event = YAHOO.util.Event;
		var DDM = YAHOO.util.DragDropMgr;
		
		//////////////////////////////////////////////////////////////////////////////
		// example app
		//////////////////////////////////////////////////////////////////////////////
		YAHOO.example.DDApp = {
		    init: function() {

		        new YAHOO.util.DDTarget("#sort1");
		        new YAHOO.util.DDTarget("#sort2");
		        new YAHOO.util.DDTarget("#sort3");
		
		        new YAHOO.example.DDList("10");
		        new YAHOO.example.DDList("11");
		        new YAHOO.example.DDList("12");
		        new YAHOO.example.DDList("13");
		
		    },
		
		};
		
		//////////////////////////////////////////////////////////////////////////////
		// custom drag and drop implementation
		//////////////////////////////////////////////////////////////////////////////
		
		YAHOO.example.DDList = function(id, sGroup, config) {

		    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
		
		    this.logger = this.logger || YAHOO;
		    var el = this.getDragEl();

		    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
		
		    this.goingUp = false;
		    this.lastY = 0;
		};
		
		YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
		
		    startDrag: function(x, y) {
		        this.logger.log(this.id + " startDrag");
		
		        // make the proxy look like the source element
		        var dragEl = this.getDragEl();
		        var clickEl = this.getEl();
		        Dom.setStyle(clickEl, "visibility", "hidden");
		
		        dragEl.innerHTML = clickEl.innerHTML;
		
		        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
		        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
		        Dom.setStyle(dragEl, "border", "2px solid gray");
		    },
		
		    endDrag: function(e) {
		
		        var srcEl = this.getEl();
		        var proxy = this.getDragEl();
		
		        // Show the proxy element and animate it to the src element's location
		        Dom.setStyle(proxy, "visibility", "");
		        var a = new YAHOO.util.Motion( 
		            proxy, { 
		                points: { 
		                    to: Dom.getXY(srcEl)
		                }
		            }, 
		            0.2, 
		            YAHOO.util.Easing.easeOut 
		        )
		        var proxyid = proxy.id;
		        var thisid = this.id;
		
		        // Hide the proxy and show the source element when finished with the animation
		        a.onComplete.subscribe(function() {
		                Dom.setStyle(proxyid, "visibility", "hidden");
		                Dom.setStyle(thisid, "visibility", "");
		            });
		        a.animate();
		    },
		
		    onDragDrop: function(e, id) {
		
		        // If there is one drop interaction, the li was dropped either on the list,
		        // or it was dropped on the current location of the source element.
		        if (DDM.interactionInfo.drop.length === 1) {
		
		            // The position of the cursor at the time of the drop (YAHOO.util.Point)
		            var pt = DDM.interactionInfo.point; 
		
		            // The region occupied by the source element at the time of the drop
		            var region = DDM.interactionInfo.sourceRegion; 
		
		            // Check to see if we are over the source element's location.  We will
		            // append to the bottom of the list once we are sure it was a drop in
		            // the negative space (the area of the list without any list items)
		            if (!region.intersect(pt)) {
		                var destEl = Dom.get(id);
		                var destDD = DDM.getDDById(id);
		                destEl.appendChild(this.getEl());
		                destDD.isEmpty = false;
		                DDM.refreshCache();
		            }
		
		        }
		    },
		
		    onDrag: function(e) {
		
		        // Keep track of the direction of the drag for use during onDragOver
		        var y = Event.getPageY(e);
		
		        if (y < this.lastY) {
		            this.goingUp = true;
		        } else if (y > this.lastY) {
		            this.goingUp = false;
		        }
		
		        this.lastY = y;
		    },
		
		    onDragOver: function(e, id) {
		    
		        var srcEl = this.getEl();
		        var destEl = Dom.get(id);
		
		        // We are only concerned with list items, we ignore the dragover
		        // notifications for the list.
		        if (destEl.nodeName.toLowerCase() == "div") {
		            var orig_p = srcEl.parentNode;
		            var p = destEl.parentNode;
		
		            if (this.goingUp) {
		                p.insertBefore(srcEl, destEl); // insert above
		            } else {
		                p.insertBefore(srcEl, destEl.nextSibling); // insert below
		            }
		
		            DDM.refreshCache();
		        }
		    }
		});
		
		Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
		
		})();
	
	</script>

